import React from 'react';
import {BrowserRouter as Router, Route,Link} from 'react-router-dom'
import 'css/CreateBox.css';


export default class CreateBox extends React.Component {


  constructor(props) {
    super(props);
    this.newItem = []
    console.log("==================================================== this.newItem= "+this.newItem)
    // this.state = {
    //   items:[]
    // }
  }

  // flashItems = ()=>{
  //
  //
  //     let items = this.state.items;
  //     items.push(this.props.item);
  //     this.setState({
  //       items:items
  //     });
  //
  // }


  componentDidMount() {

  }
  componentDidUpdate() {
    // this.flashItems();
    //
    // console.log("=================================== this.state.items = "+this.state.items)
  }

  getElements = (values) => {
    if(!values){
      return null;
    }
    return values.map(( index) => {
      return this.addEle( index);
    });
  }

  redom(){
    var data = new Date()
    return data.toString();
  }

  addEle = (index) => {
    // 需要指定key 不重复，否则会报警告
    switch (index) {

      case 1:
        return <div className='nom_input item' key={Math.random()*10}><label>name:<input type="text"/></label></div>
        break;
      case 2:
        return <div className='big_text item' key={Math.random()*10}><label>content:</label><textarea rows="3" cols="20">
         </textarea></div>
        break;
      case 3:
        return <div className='sig_box item'key={Math.random()*10} >性别:
          <label><input type="radio" name="sex" value="男生"/>男生</label>
          <label><input type="radio" name="sex" value="女生"/>女生</label></div>
        break;
      case 4:return <div className='more_box item'key={Math.random()*10}><label><input type="checkbox" name="like" value="0"/>音乐</label>
        <label><input type="checkbox" name="like" value="1"/>旅游</label>
      </div>
        break;
      case 5:
        return <input type="text" key={Math.random()*10}/>
        break;
      case 6:
        return <input type="text" key={Math.random()*10}/>
        break;
      default:
        break;

    }
  }



  createItems(){
    let items = this.state.items;
    let head = null;

    for (let item in items){
      console.log("================================================= item = "+item)
     switch (item) {

       case 1:
         return <input type="text"/>
         break;
       case 2:
         return <textarea rows="3" cols="20">
         </textarea>
         break;
       case 3:
         return <input type="radio" name="sex" value="男生"/>
         break;
       case 4:
         return <input type="checkbox" name="like" value="0"/>

       case 5:
         return <input type="text"/>
         break;
       case 6:
         return <input type="text"/>
         break;
       default:
         break;

     }

    }
    let boxContent =  <div id='create_box'>

    </div>
    return boxContent;
  }

  render() {

    console.log("=======================================this.props.item = "+this.props.newitem)
    this.newItem.push(this.props.newitem)
    console.log("=========================render =this.newItem ")
    return  this.getElements(this.newItem);

  }
}
